<template>
    <div class="panel">
        <div class="title">
            <div class="icon-box" v-for="item in 1" :key="item">
                <span class="icon iconfont icon-lizifeng"></span>
            </div>
        </div>
        <div class="body">
            <div class="text-box" v-for="item in list" :key="item">
                {{ item }}
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
let list: string[] = reactive(['这', '是', '一', '段', '文', '字']);
</script>

<style lang="scss" scoped>
.panel {
    width: 600px;
    height: 350px;
    border-radius: 10px;

    .title {
        .icon-box {
            display: inline-block;
            animation: fengche 3s linear infinite;

            .icon {
                font-size: 66px;
                color: green;
            }
        }

        @keyframes fengche {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(-360deg);
            }
        }
    }

    .body {
        background-image: url('@/assets/img/bac.jpeg');

        .text-box {
            background: rgb(62, 93, 0);
            background-clip: text;
            font-size: 80px;
            font-weight: bold;
            display: inline-block;
            color: transparent;
            animation: textRotate 5s linear infinite;

            text-shadow:
                10px 10px 5px rgba(0, 0, 0, 0.1),
                10px 10px 10px rgba(0, 0, 0, 0.2),
                10px 10px 15px rgba(0, 0, 0, 0.3),
                10px 10px 20px rgba(0, 0, 0, 0.4)
        }

        @keyframes textRotate {
            0% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(45deg);
            }

            50% {
                transform: rotate(0deg);
            }

            75% {
                transform: rotate(-45deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }
    }
}
</style>